<script setup>
import FirstTitle from "@comp/FirstTitle";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onMounted } from "vue";
import { searchDataKqzy } from "@/api/search";
import { addOrUpdateKqzy } from "@/api/addOrUpdate";
import { postTableData } from "@/api/table";

const city = window.globalObj.name;
const valueHtml = ref(
  `主要对专业力量、防护救援装备器材、疏散掩蔽生活物资、集结装载投送和紧急补充生产等支援保障能力，以及组织跨区支援的有利条件和不利因素进行分析。`
);

const editorRef10 = shallowRef();
const valueHtml10 = ref(
  `本级共有7类传统专业队共27支队伍，2801人。各县(区)共有合成专业队1064人。具体情况如下:`
);
const toolbarConfig10 = {};
const editorConfig10 = { placeholder: "请输入内容..." };
const mode10 = ref("default");
const handleCreated10 = (editor) => {
  editorRef10.value = editor; // 记录 editor 实例，重要！
};
const editorRef11 = shallowRef();
const valueHtml11 = ref(
  `共有配套的专业队装备器材XX类、XX套防护救援装备器材可用于跨区支援保障。具体情况如下:`
);
const toolbarConfig11 = {};
const editorConfig11 = { placeholder: "请输入内容..." };
const mode11 = ref("default");
const handleCreated11 = (editor) => {
  editorRef11.value = editor; // 记录 editor 实例，重要！
};
const editorRef12 = shallowRef();
const valueHtml12 = ref(
  `按使用本辖区交通运力总量的XX%计算，可支援保障普通客车 XX台次、货车 XX台次。具体情况如下:`
);
const toolbarConfig12 = {};
const editorConfig12 = { placeholder: "请输入内容..." };
const mode12 = ref("default");
const handleCreated12 = (editor) => {
  editorRef12.value = editor; // 记录 editor 实例，重要！
};
const editorRef13 = shallowRef();
const valueHtml13 = ref(
  `按调用本辖区战储生活物资总量的XX%计算，可支援保障主食XX万kg、副食XX万kg、饮用水XX万升。具体情况如下：`
);
const toolbarConfig13 = {};
const editorConfig13 = { placeholder: "请输入内容..." };
const mode13 = ref("default");
const handleCreated13 = (editor) => {
  editorRef13.value = editor; // 记录 editor 实例，重要！
};

// 队伍体系表格
const headerCellStyleDwtx = ({ row, column, rowIndex, columnIndex }) => {
  nextTick(() => {
    if (columnIndex > 0) {
      const propNum = Number(column.property.includes("ban"));
      const dom = document.querySelector(`.${column.id}`);
      if (propNum % 2 === 0) {
        // 被合并的
        dom.setAttribute("colspan", 0);
        dom.style.display = "none";
      } else {
        // 合并的
        dom.setAttribute("colspan", 2);
        dom.innerHTML = column.label;
      }
    }
  });

  return {
    height: "40px",
  };
};
const cellStyleDwtx = () => {
  return {
    height: "38px",
    padding: "4px 0",
    fontSize: "14px",
  };
};
const getSummariesDwtx = ({ columns, data }) => {
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = h("div", {}, ["合计"]);
      return;
    }
    console.log(column);
    sums[index] = "X";
  });
  return sums;
};

// 表头单元格样式
const headerCellStyle = () => {
  return {
    backgroundColor: "#f5f7fa",
    color: "rgba(0,0,0,0.85)",
    fontSize: "14px",
    height: "54px",
  };
};
// 单元格样式
const cellStyle = () => {
  return {
    color: "rgba(0,0,0,0.65)",
    fontSize: "14px",
    lineHeight: "22px",
  };
};

const editorRef = shallowRef();
const editorRef1 = shallowRef();
const editorRef2 = shallowRef();

const toolbarConfig = {};
const toolbarConfig1 = {};
const toolbarConfig2 = {};
const editorConfig = {
  placeholder: "请输入内容...",
};
const editorConfig1 = {
  placeholder: "请输入内容...",
};
const editorConfig2 = {
  placeholder: "请输入内容...",
};
const mode = ref("default");
const mode1 = ref("default");
const mode2 = ref("default");

// 加载html
const initHtml = () => {
  searchDataKqzy({ m: "能力现状" }).then((res) => {
    const { data } = res;
    valueHtml.value = data.find((x) => x.k === "能力现状引言")?.v;
    valueHtml1.value = data.find(
      (x) => x.k === "组织跨区支援的有利条件和不利因素"
    )?.v;
    valueHtml2.value = data.find(
      (x) => x.k === "支援保障紧急补充生产的专业装备器材"
    )?.v;
    valueHtml10.value = data.find((x) => x.k === "专业力量支援保障能力现状")?.v;
    valueHtml11.value = data.find(
      (x) => x.k === "防护救援装备器材支援保障能力现状"
    )?.v;
    valueHtml12.value = data.find(
      (x) => x.k === "集结装载投送支援保障能力现状"
    )?.v;
    valueHtml13.value = data.find(
      (x) => x.k === "生活物资支援保障能力现状"
    )?.v;
  });
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

const handleCreated1 = (editor) => {
  editorRef1.value = editor; // 记录 editor 实例，重要！
};
const handleCreated2 = (editor) => {
  editorRef2.value = editor; // 记录 editor 实例，重要！
};

const valueHtml1 = ref(
  "（1）有利条件：集结装载投送方面，按XX%的比例动用交通运力，可提供支援保障投送力量货车XX台次、客车XX台次，一次投送可运送货物约XX万吨、人员XX人，快速集结装载投送的能力较强、潜力投送能力较大。<br/>（2）不利因素：专业力量和装备器材方面，传统专业队装备器材配套不足，战时随时执行相应的跨区支援任务存在一定难度，缺少新型专业队以及相应的装备器材，不能执行相应的跨区支援任务。生活物资方面，支援保障生活物资动用储备XX%后，后续可持续支援保障潜力不大。集结装载投送，按XX%的比例动用交通运力，车辆数量规模较大，集结、装载、转运的组织协调比较复杂。补充生产的工程物资方面，保障支援加工常规混凝土XX万m³的工程物资后，后续持续支援保障能力具有不确定性。补充生产的专业装备器材方面，可提供供水生产设备（套）、发电设备（套）等专业生产装备器材，支援保障范围有限。"
);
const valueHtml2 = ref(
  `<p>1.支援的工程物资:支援的工程物资可加工2万mC40型通用型混凝土，估算约4.8万吨。</p><p>2.支援的专业装备器材共4类、0套。具体情况如下： 供（净）水生产设备：XX套（单套装备体积（m³）为XX、总体积为 ：XX）；食品加工生产设备：XX套（单套装备体积（m³）为XX、总体积为 ：XX）;发电设备：XX套（单套装备体积（m³）为XX、总体积为 ：XX）;供热设备：XX套（单套装备体积（m³）为XX、总体积为 ：XX）;供电设备：XX套（单套装备体积（m³）为XX、总体积为 ：XX）。</p>`
);

const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdateKqzy({
      m: "能力现状",
      data: [
        {
          k: "能力现状引言",
          v: valueHtml.value,
        },
        {
          k: "组织跨区支援的有利条件和不利因素",
          v: valueHtml1.value,
        },
        {
          k: "支援保障紧急补充生产的专业装备器材",
          v: valueHtml2.value,
        },
        {
          k: "专业力量支援保障能力现状",
          v: valueHtml10.value,
        },
        {
          k: "防护救援装备器材支援保障能力现状",
          v: valueHtml11.value,
        },
        {
          k: "集结装载投送支援保障能力现状",
          v: valueHtml12.value,
        },
        {
          k: "生活物资支援保障能力现状",
          v: valueHtml13.value,
        },
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};
// 专业力量支援保障能力现状
const dwtxxzList = ref([]);
const getJsxzData = () => {
  return postTableData({
    docType: "crosssupport",
    method: "renfangzhuangyedui",
  }).then((res) => {
    if (res.code === 200) {
      dwtxxzList.value = [
        {
          jd_name: "行政区域",
          zhongyaomubiao_ban: "队数",
          zhongyaomubiao_num: "人数",
          yiliaojiuhu_ban: "队数",
          yiliaojiuhu_num: "人数",
          xiaofang_ban: "队数",
          xiaofang_num: "人数",
          zhian_ban: "队数",
          zhian_num: "人数",
          fanghua_ban: "队数",
          fanghua_num: "人数",
          jiaotong_ban: "队数",
          jiaotong_num: "人数",
          tongxin_ban: "队数",
          tongxin_num: "人数",
          ban_sum_amount: "队数",
          num_sum_amount: "人数",
        },
        ...(res?.data || []),
      ];
    }
  });
};
const zybzfhList = ref([]);
// 支援保障防护救援装备器材统计表
const getZybzfhData = () => {
  return postTableData({
    docType: "crosssupport",
    method: "zhiyuanbaozhangfanghujiuyuansb",
  }).then((res) => {
    if (res.code === 200) {
      zybzfhList.value = res?.data || [];
    }
  });
};
// 生活物资支援保障能力现状
const wzzyList = ref([]);
const getWzzyData = () => {
  return postTableData({
    docType: "crosssupport",
    method: "shenghuowuzizhanchuqingkuang",
  }).then((res) => {
    if (res.code === 200) {
      wzzyList.value = res?.data || [];
    }
  });
};
// 投送支援保障力量统计表
const tszyList = ref([]);
const getTszyData = () => {
  return postTableData({
    docType: "crosssupport",
    method: "jiaotongyunliqingkuangtongji",
  }).then((res) => {
    if (res.code === 200) {
      tszyList.value = res?.data || [];
    }
  });
};
// 支援的工程物资种类参考清单
const gcwzList = ref([]);
const getGcwzData = () => {
  return postTableData({
    docType: "crosssupport",
    method: "zhiyuangongchengwuzizhonglei",
  }).then((res) => {
    if (res.code === 200) {
      gcwzList.value = res?.data || [];
    }
  });
};
// 援的专业装备器材清单
const zyzbList = ref([]);
const getZyzbData = () => {
  return postTableData({
    docType: "crosssupport",
    method: "kuaquzhiyuanliliangbiancheng",
  }).then((res) => {
    if (res.code === 200) {
      zyzbList.value = res?.data || [];
    }
  });
};
// 数组计算
const sumArr = (arr) => {
  return arr.reduce((acc, current) => Number(acc) + Number(current), 0);
};

onMounted(async () => {
  await initHtml();
  await getJsxzData();
  // await getZybzfhData();
  // await getWzzyData();
  // await getTszyData();
  // await getGcwzData();
  await getZyzbData();
});
onBeforeUnmount(() => {
  if (!editorRef.value) return;
  editorRef.value.destroy();
  if (!editorRef1.value) return;
  editorRef1.value.destroy();
  if (editorRef10.value) editorRef10.value.destroy();
  if (editorRef11.value) editorRef11.value.destroy();
  if (editorRef12.value) editorRef12.value.destroy();
  if (editorRef13.value) editorRef13.value.destroy();
});
</script>
<template>
  <div>
    <FirstTitle name="引言" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>
    <FirstTitle name="专业力量支援保障能力现状" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef10"
        :defaultConfig="toolbarConfig10"
        :mode="mode10"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml10"
        :defaultConfig="editorConfig10"
        :mode="mode10"
        @onCreated="handleCreated10"
      />
    </div>
    <div class="top-15 zddj text-center">{{ city }}人防专业队建设现状</div>
    <el-table
      :header-cell-style="headerCellStyleDwtx"
      :cell-style="cellStyleDwtx"
      class="top-15"
      id="tableDwtx"
      :data="dwtxxzList"
      max-height="500px"
      border
    >
      <el-table-column
        min-width="100"
        prop="jd_name"
        label="行政区域"
        align="center"
      />
      <el-table-column
        prop="zhongyaomubiao_ban"
        label="重要目标抢修专业队"
        align="center"
      />
      <el-table-column
        prop="zhongyaomubiao_num"
        label="重要目标抢修专业队1"
        align="center"
      />
      <el-table-column
        prop="yiliaojiuhu_ban"
        label="医疗救护专业队"
        align="center"
      />
      <el-table-column
        prop="yiliaojiuhu_num"
        label="医疗救护专业队1"
        align="center"
      />
      <el-table-column prop="xiaofang_ban" label="消防专业队" align="center" />
      <el-table-column prop="xiaofang_num" label="消防专业队1" align="center" />
      <el-table-column prop="zhian_ban" label="治安专业队" align="center" />
      <el-table-column prop="zhian_num" label="治安专业队1" align="center" />
      <el-table-column
        prop="fanghua_ban"
        label="防化防疫专业队"
        align="center"
      />
      <el-table-column
        prop="fanghua_num"
        label="防化防疫专业队1"
        align="center"
      />
      <el-table-column
        prop="jiaotong_ban"
        label="交通运输专业队"
        align="center"
      />
      <el-table-column
        prop="jiaotong_num"
        label="交通运输专业队1"
        align="center"
      />
      <el-table-column prop="tongxin_ban" label="通信专业队" align="center" />
      <el-table-column prop="tongxin_num" label="通信专业队1" align="center" />
      <el-table-column prop="ban_sum_amount" label="合计" align="center" />
      <el-table-column prop="num_sum_amount" label="合计1" align="center" />
    </el-table>

    <FirstTitle name="防护救援装备器材支援保障能力现状" class="top-15" />

    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef11"
        :defaultConfig="toolbarConfig11"
        :mode="mode11"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml11"
        :defaultConfig="editorConfig11"
        :mode="mode11"
        @onCreated="handleCreated11"
      />
    </div>

    <FirstTitle name="生活物资支援保障能力现状" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef13"
        :defaultConfig="toolbarConfig13"
        :mode="mode13"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml13"
        :defaultConfig="editorConfig13"
        :mode="mode13"
        @onCreated="handleCreated13"
      />
    </div>

    <FirstTitle name="集结装载投送支援保障能力现状" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef12"
        :defaultConfig="toolbarConfig12"
        :mode="mode12"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml12"
        :defaultConfig="editorConfig12"
        :mode="mode12"
        @onCreated="handleCreated12"
      />
    </div>

    <FirstTitle name="紧急补充生产支援保障能力现状" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef2"
        :defaultConfig="toolbarConfig2"
        :mode="mode2"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml2"
        :defaultConfig="editorConfig2"
        :mode="mode2"
        @onCreated="handleCreated2"
      />
    </div>

    <FirstTitle name="组织跨区支援的有利条件和不利因素" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef1"
        :defaultConfig="toolbarConfig1"
        :mode="mode1"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml1"
        :defaultConfig="editorConfig1"
        :mode="mode1"
        @onCreated="handleCreated1"
      />
    </div>

    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss"></style>